<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <script>
        /**
         * 首先从宏任务队列中取出一个宏任务执行
         * 执行同步任务
         * 清空微任务队列
         * DOM渲染
         * 再取出一个宏任务执行
         * 执行同步任务
         * 清空微任务队列
         * DOM渲染
         * 再取出一个宏任务执行
         */

        let oBtn1 = document.querySelectorAll('button')[0];
        let oBtn2 = document.querySelectorAll('button')[1];

        oBtn1.onclick = function(){
            console.log(1);
            setTimeout(()=>{
                console.log(33);
            },1000);
            setTimeout(()=>{
                console.log(33);
            },1000);
            setTimeout(()=>{
                console.log(33);
            },1000);

            Promise.resolve().then(value=>{
                console.log(4);
            })
            Promise.resolve().then(value=>{
                console.log(5);
            })
            console.log(2);
        }

        oBtn2.onclick = function(){
            console.log(11);
            setTimeout(()=>{
                console.log(31);
            },1000);

            Promise.resolve().then(value=>{
                console.log(41);
            })
            Promise.resolve().then(value=>{
                console.log(51);
            })
            console.log(21);
        }
    </script>
</body>
</html>